import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [files, setFiles] = useState([]);
  const [selectedFile, setSelectedFile] = useState(null);

  useEffect(() => {
    loadFiles();
  }, []);

  const loadFiles = async () => {
    const response = await axios.get('/files');
    setFiles(response.data);
  };

  const uploadFile = async () => {
    const formData = new FormData();
    formData.append('file', selectedFile);

    await axios.post('/upload', formData);
    loadFiles();
  };

  return (
      <div>
        <h1>Web 网盘</h1>
        <input type="file" onChange={e => setSelectedFile(e.target.files[0])} />
        <button onClick={uploadFile}>上传文件</button>
        <div>
          {files.map(file => (
              <div key={file}>
                <a href={`/download/${file}`}>{file}</a>
              </div>
          ))}
        </div>
      </div>
  );
}

export default App;